import React from 'react';
import { render } from 'react-dom';

import { HashRouter as Router, Route, Redirect, Switch} from 'react-router-dom'
import { Provider } from 'mobx-react';
import { asyncComponent } from 'react-async-component';
import { Tools } from 'weaver-mobile';
import { FloatingTouch } from 'weaver-mobile-page';

import allStore from './stores';
import './style';
import blog_em_dict from './util/index';
import loadjs from 'loadjs';
// 与pc端调用的方法一样，实现不一样。
blog_em_dict.addWindowFunc();
const getLocaleLabel = Tools.getLocaleLabel.bind(this, 'blog_mobile');

const coms = {
  Home: asyncComponent({
    resolve: () => import('./components/main')
  }),
  MyBlog: asyncComponent({ //我的微博
    resolve: () => import('./components/myBlog')
  }),
  BlogMain: asyncComponent({  //微博主页
    resolve: () => import('./components/blogMain')
  }),
  BlogReport: asyncComponent({ //微博报表
    resolve: () => import('./components/blogReport')
  }),
	UserCenter: asyncComponent({ //个人中心
    resolve: () => import('./components/userCenter')
  }),
  HisBlog: asyncComponent({ // 他的微博
    resolve: () => import('./components/hisBlog/HisBlogRoute')
  }),
}

class Root extends React.Component {

  constructor(props) {
    super(props);
    loadjs.isDefined('observerJS') ? loadjs.ready('observerJS') :
    loadjs('/blog/js/intersection-observer.js', 'observerJS');
  }

  onHomePageClick() {
    window.location.href = '/#/';
  }

  render() {
		return (
      <Provider {...allStore}>
          <Router>
            <FloatingTouch onClick={() => this.onHomePageClick()}>
              <Route name='home' path='/' onEnter={getLocaleLabel} render={() => {
                  return (
                      <coms.Home>
                        <Switch>
                          <Route name='myBlog' breadcrumbName='我的微博' path='/myBlog' component={coms.MyBlog} />
                          <Route name='blogMain' breadcrumbName='微博主页' path='/blogMain' component={coms.BlogMain}/>
                          <Route name='blogReport' breadcrumbName='微博报表' path='/blogReport' component={coms.BlogReport} />
                          <Route name='userCenter' breadcrumbName='个人中心' path='/userCenter' component={coms.UserCenter} />
                          <Route name='hisBlog' breadcrumbName='他的微博' path='/hisBlog/:id' component={coms.HisBlog} />
                          <Redirect exact path="/" to={{pathname: '/blogMain'}} />
                        </Switch>
                      </coms.Home>
                  )
              }}/>
            </FloatingTouch>
          </Router>
      </Provider>
    );
  }
}

Tools.getLocaleLabel('blog_mobile', () => {
  render(<Root />, document.getElementById('root'));
});
